<template>
    <view>
        <!-- <custom-header title="佣金余额" /> -->

        <view class="container">
            <view class="title">账户资金保障中</view>
            <view class="header">
                <view class="balance">
                    <view class="balance_title">可用余额（元）</view>
                    <view class="amount">{{ balance }}</view>
                </view>
            </view>
            <button class="recharge-btn" @tap="goCashOut">
                <text style="padding-right: 20rpx">{{ selectedAmount ? '￥' + selectedAmount : '' }}</text>
                提现
            </button>

            <!-- 变动明细 -->
            <view class="record-list">
                <view class="section-title">变动明细</view>
                <block v-for="(item, index) in records" :key="index">
                    <view class="record-item">
                        <view class="record-type">{{ item.type }}</view>
                        <view :class="'record-amount ' + (item.amount > 0 ? 'positive' : 'negative')">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</view>
                        <view class="record-time">{{ item.time }}</view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
// import customHeader from '@/components/custom-header/index';
// pages/kickback/kickback.js
// const WXCall = require('../../utils/SubAUtils/WXCall');
export default {
    // components: {
    //     customHeader
    // },
    data() {
        return {
            balance: 2862.32,
            customAmount: null,
            records: [
                {
                    type: '充值',
                    amount: 12,
                    time: '2025-01-12 12:19:20'
                },
                {
                    type: '充值',
                    amount: 12,
                    time: '2025-01-12 12:19:20'
                },
                {
                    type: '充值',
                    amount: 12,
                    time: '2025-01-12 12:19:20'
                },
                {
                    type: '充值',
                    amount: 12,
                    time: '2025-01-12 12:19:20'
                }
            ],
            selectedAmount: null
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getRecordList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        goCashOut() {
            console.log('132132');
            uni.navigateTo({
                url: '/pages/cashOut/cashOut'
            });
        },

        getRecordList() {
            let params = {
                userId: uni.getStorageSync('userId')
            };
            // WXCall.WXCall('/wx/app/user/getCommission', params, 'GET', true, (res) => {
            //     if (res.code >= 0) {
            //         console.log(res)
            //         this.setData({
            //             commission: res.result
            //         })
            //     } else {
            //         new Error(res.ReturnInfo)
            //     }
            // })
        }
    }
};
</script>
<style>
page {
    background: linear-gradient(180deg, #dfebff 0%, #ffffff 46%), linear-gradient(268deg, #a4f9ff 0%, #e7e0ff 100%);
}

.container {
    width: 690rpx;
    margin: 200rpx auto 0;
    min-height: 100vh;
}

.header {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    height: 290rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.balance_title {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
}

.title {
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 30rpx;
    background: linear-gradient(144deg, rgba(0, 37, 151, 0.83) 0%, rgba(91, 132, 255, 0.01) 66%);
    border-top-right-radius: 16rpx;
    border-top-left-radius: 16rpx;
}

.balance {
    font-size: 28rpx;
    color: #666;
}

.amount {
    font-family: D-DIN-PRO, D-DIN-PRO;
    font-weight: bold;
    font-size: 72rpx;
    color: #000000;
}
.recharge-btn {
    width: 90%;
    margin: 40rpx auto;
    background: #001c71;
    color: white;
    border-radius: 50rpx;
    font-size: 32rpx;
}
.record-list {
    width: 690rpx;
    margin: 0 auto 0;
    box-sizing: border-box;
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 20rpx;
}

.record-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
}

.record-type {
    font-size: 28rpx;
    color: #333;
}

.record-amount {
    font-size: 32rpx;
    float: right;
}

.positive {
    color: #07c160;
}

.negative {
    color: #ff4500;
}

.record-time {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin-top: 10rpx;
}
</style>
